.<template>
  <div class="header">
    <div class="top">
      <div class="top-left">
        <div>
          <img :src="evaluate.avatar" alt="" />
        </div>
      </div>
      <div class="top-right">
        <div class="title">
          <img src="../../assets/images/brand@2x.png" alt="" />
          <span>{{ evaluate.name }}</span>
        </div>
        <div class="delivery">
          <span
            >{{ evaluate.description }}/{{
              evaluate.deliveryTime
            }}分钟送达</span
          >
        </div>
        <div class="discount">
          <img src="../../assets/images/decrease_1@2x.png" alt="" />
          <span>{{ evaluate.supports && evaluate.supports[0].content }}</span>
        </div>
      </div>
      <div class="shuliang" @click="show=true">
        <span>{{ evaluate.supports && evaluate.supports.length }}</span>
        <a class="layout-keyboard_arrow_right"></a>
      </div>
      <div class="bj">
        <img :src="evaluate.bgImg" alt="" />
      </div>
    </div>
    <div class="notice" @click="show=true">
      <img src="../../assets/images/bulletin@2x.png" alt="" />
      <span>{{ evaluate.bulletin }} </span>
      <div class="layout-keyboard_arrow_right"></div>
    </div>
    <!-- 遮罩层区域 -->
    <div class="container" v-show="show">
      <div class="content-view">
        <div class="content">
          <div class="title">
            <span>粥品香坊（大运村）</span>
          </div>
          <!-- 评价星星组件 -->
          <div class="stars">
          <seller-stars size="48" :score="evaluate.score"></seller-stars>
          </div>
        </div>
        <div class="contai">
          <div class="sale">
            <div class="title">
              <span class="wit"></span>
              <span class="nub">优惠信息</span>
              <span class="wit"></span>
            </div>
            <ul  class="item-box">
              <li v-for="(item,index) in evaluate.supports" :key="index">
                <img src="../../assets/images/decrease_2@3x.png" alt="">
                <span>{{item.content}}</span>
              </li>
            </ul>
          </div>
          <div class="sale">
            <div class="title">
              <span class="wit"></span>
              <span class="nub">商家公告</span>
              <span class="wit"></span>
            </div>
            <div class="maincontent">
              <span>{{evaluate.bulletin}}</span>
            </div>
          </div>
        </div>
      </div>
      <footer>
        <svg
          t="1622777613716"
          class="icon clore"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1103"
          width="56"
          height="56"
          @click="show=false"
        >
          <path
            d="M813.698893 270.640885l-241.344029 241.34403L813.698893 753.359115l-60.339778 60.339778-241.359115-241.389284L270.640885 813.698893l-60.339778-60.339778 241.359114-241.389285L210.301107 270.640885l60.339778-60.339778 241.3742 241.344029L753.359115 210.301107l60.339778 60.339778z"
            fill="#ffffff"
            p-id="1104"
            
          ></path>
        </svg>
      </footer>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Overlay } from "vant";
import Vue from "vue";
import stars from"../stars";
export default {
  name: "seller-header",
  data() {
    return {
      [Overlay.name]: Overlay,
      show: false,
    };
  },
  computed: {
    ...mapState(["evaluate"]),
  },
  components:{
    "seller-stars":stars
  }
};
</script>

<style lang="less" scopend>
.header {
  background: rgba(7, 17, 27, 0.5);
  position: relative;
  overflow: hidden;
  height: 268px;
  .top {
    position: relative;
    display: flex;
    padding: 48px 0 36px 48px;

    .top-left {
      padding-right: 32px;
      img {
        border-radius: 4px;
        height: 128px;
        width: 128px;
      }
    }
    .top-right {
      position: relative;
      .title {
        padding-top: 4px;
        padding-bottom: 16px;
        img {
          padding-right: 12px;
          width: 60px;
          height: 36px;
        }
        span {
          font-size: 32px;
          color: rgb(255, 255, 255);
          font-weight: bold;
          line-height: 36px;
        }
      }
      .delivery {
        padding-bottom: 20px;
        span {
          font-size: 24px;
          color: rgb(255, 255, 255);
          font-weight: 200;
          line-height: 24px;
        }
      }
      .discount {
        padding-bottom: 4px;
        img {
          padding-right: 8px;
          width: 24px;
          height: 24px;
        }
        span {
          overflow: hidden;
          font-size: 20px;
          color: rgb(255, 255, 255);
          font-weight: 200;
          line-height: 24px;
        }
      }
    }
    .bj {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: #ffc0cb;
      z-index: -1;
      -webkit-filter: blur(3px);
      filter: blur(3px);
    }
    .shuliang {
      position: absolute;
      right: 12px;
      bottom: 42px;
      width: 45px;
      height: 24px;
      background: rgba(0, 0, 0, 0.2);
      font-size: 10px;
      font-weight: 200px;
      line-height: 12px;
      color: rgba(255, 255, 255, 1);
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-radius: 10px;
      span {
        zoom: 1;
        position: relative;
        left: 4px;
      }
    }
  }
  .notice {
    background-color: rgba(7, 17, 27, 0.2);

    height: 56px;
    padding-right: 24px;
    img {
      padding-right: 8px;
      padding-left: 24px;
      width: 44px;
      height: 24px;
    }
    span {
      font-size: 20px;
      color: rgb(255, 255, 255);
      font-weight: 200;
      line-height: 56px;
      padding-right: 8px;
    }
  }

  .container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: rgba(7, 17, 27, 0.8);
    backdrop-filter: blur(10px);
    z-index: 1000;
    // overflow: auto;
    .content-view {
      min-height: 100%; //如果内容不够长时，也保证内容有全屏长度
      .content {
        padding-top: 128px; //向上和屏幕顶部保持50px间距
        // padding-bottom: 96px;
        // height: 2000px;
        .title {
          padding-bottom: 32px;
          text-align: center;
          span {
            font-size: 32px;
            font-weight: 700;
            color: rgb(255, 255, 255);
            line-height: 32px;
          }
        }
        .stars {
          text-align: center;
          height: 48px;
          padding-bottom: 56px;
        }
      }
      .sale {
        // display: flex;
        .maincontent{
          padding-left: 48px;
          padding-right: 48px;
          // padding-top: 48px;
          // padding-bottom: 48px;
          span{
            font-size: 30px;
            font-weight: 200;
            color: rgb(255, 255, 255);
            line-height: 48px;
          }
        }
        .item-box{
          // display: flex;
          padding-left: 80px;
          padding-bottom: 56px;
          li{
            padding-bottom: 24px;
            img{
           height: 32px;
           padding-right: 12px;
          //  text-align: center;
          // line-height: 24px;
            
          }
          span{
            padding-top:48px;
            font-size: 24px;
            font-weight: 200;
            color: rgb(255, 255, 255);
            line-height: 24px;
            //  padding-right: 12px;
            padding-bottom: 24px;
          }

          }
          
        }
        .title {
          display: flex;
          padding-bottom: 48px;
          align-items: center;
          // vertical-align:middle
          .nub {
            font-size: 26px;
            font-weight: 600;
            color: rgb(255, 255, 255);

            // line-height: 32px;
            // -moz-box-align:center;
          }
          .wit {
            height: 1px;
            width: 224px;
            flex: 1;
            background-color: rgba(255, 255, 255, 0.5);
            // vertical-align:middle;
            &:first-child {
              margin-left: 72px;
              margin-right: 24px;
            }
            &:last-child {
              margin-right: 72px;
              margin-left: 24px;
            }
          }
        }
      }
    }
    footer {
      // margin: -64px;
      margin-top: -196px;
      width: 100%;
      height: 196px;
      color: white;
      line-height: 196px;
      // background-color: pink;
      // position: absolute;
      // bottom: 0;
      text-align: center;
      .close {
      }
    }
  }
}
</style>